<template>
    <div class="app-container">
        <div class="custom_card_0">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" size="small">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="表单名称" prop="busFormName">
                            <el-input style="width: 260px" v-model="queryParams.busFormName" placeholder="请输入表单名称" clearable
                                      @keyup.enter.native="handleQuery"/>
                        </el-form-item>
                    </el-col>
                    <!--          <el-col :span="6">-->
                    <!--            <el-form-item label="业务类型" prop="bizType">-->
                    <!--              <el-select style="width: 260px" v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>-->
                    <!--                <el-option v-for="dict in dict.type.bus_flow_type" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>-->
                    <!--              </el-select>-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                    <el-col :span="6">
                        <div style="display: flex; justify-content: start">
                            <el-button type="primary" @click="handleQuery">查询</el-button>
                            <el-button @click="resetQuery">重置</el-button>
                        </div>
                    </el-col>

                </el-row>
            </el-form>
        </div>

        <div class="custom_card">
            <el-row class="mb8" :gutter="10">
                <el-col :span="3">
                    <el-button type="primary" size="medium" @click="addSetting">新增</el-button>
                </el-col>
                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="handleQuery"
                ></right-toolbar>
            </el-row>

            <el-table
                v-loading="loading"
                :data="basicList"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                <template slot="empty">
                    <el-empty :image-size="50" description="暂无表单设置信息"></el-empty>
                </template>
                <el-table-column
                    align="center"
                    prop="busFormName"
                    label="表单名称"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="bizType"
                    label="业务类型"
                    min-width="180">
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.bus_flow_type" :value="row.bizType"/>
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                    align="center"-->
<!--                    prop="pageAddress"-->
<!--                    label="引入页面"-->
<!--                    min-width="180">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                    align="center"-->
<!--                    prop="callingMethod"-->
<!--                    label="调用方法"-->
<!--                    min-width="180">-->
<!--                </el-table-column>-->
                <el-table-column
                    align="center"
                    prop="remark"
                    label="备注"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="sort"
                    label="顺序"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="updateBy"
                    label="创建人"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="updateTime"
                    label="更新时间"
                    min-width="180">
                </el-table-column>

                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="left">
                    <template v-slot="{ row }">
                        <el-button size="small" type="text"
                                   @click="goEdit(row)">编辑
                        </el-button>
                        <el-button size="small" type="text"
                                   @click="deleteListRow(row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                        @pagination="getList"/>
        </div>


    </div>
</template>

<script>
import * as formSettingApi from "@/api/formConfig/formSetting";

export default {
    dicts: ['bus_flow_type'],
    data() {
        return {
            loading: false, // 加载标识
            showSearch: true,
            // 总条数
            total: 0,
            // 工单数据
            basicList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                busFormName: null,
                flowBusId: '',
            },
        }
    },
  created() {
        this.queryParams.flowBusId = this.$route.query.flowBusId
        this.getList();
    },
    // 方法集合
    methods: {
        getList() {
            this.loading = true;
            formSettingApi.list(this.queryParams).then(res => {
                this.loading = false;
                this.total = res.total;
                this.basicList = res.rows;
            })
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.$refs.queryForm.resetFields();
            this.handleQuery();
        },
        // 新增
        addSetting() {
            this.$router.push({
                name: 'SettingAdd',
                query: {
                    flowBusId: this.queryParams.flowBusId,
                    bizType: this.$route.query.bizType
                }
            })
        },
        //编辑
        goEdit(row) {
            this.$router.push({
                name: 'SettingAdd',
                query: {
                    flowBusId: this.queryParams.flowBusId,
                    bizType: this.$route.query.bizType,
                    id: row.id
                }
            })
        },
        deleteListRow(row) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                formSettingApi.deleteRow(row.id).then(res => {
                    this.handleQuery()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            })
        }

    },


}
</script>

<style lang="scss" scoped>
</style>
